<template>
  <div class = "ordered" onselectstart="return false">
    <div>
      <router-link to="/order">
        <img src="@/assets/icon/back2.png">
      </router-link>
    </div>
    <h1>已下单</h1>
    <p>点餐桌号：A001</p>
    <p>就餐方式：堂食</p>
    <p>总价格：{{$store.getters.pricecount}}</p>
    <h2>
      <input type="radio" name="支付" style="zoom:140%" checked>微信支付
      &nbsp;&nbsp;
      <input type="radio" name="支付" style="zoom:140%">支付宝支付
    </h2>
    <p>
      <el-button @click= "checkout">结账</el-button>
    </p>
    <OrderedCartin></OrderedCartin>
  </div>
</template>

<script>
import OrderedCartin from '@/components/OrderedCartin.vue'
export default {
  components: { OrderedCartin },
  data () {
    return {}
  },
  methods: {
    checkout () {
      if (this.$store.getters.pricecount > 0) {
        this.$confirm('是否确认订单并支付?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '支付成功!',
            promise: this.remove()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消支付'
          })
        })
      } else {
        this.$message({
          type: 'info',
          message: '未添加商品'
        })
      }
    },
    remove () {
      this.$store.commit('ORDERED_REMOVEALL')
      this.$router.push('/order')
    }
  }
}
</script>

<style scoped>
.ordered{
  width: 350px;
  color: orange;
  align-self: center;
}
.ordered button{
  background-color: orange;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: none;
  position: absolute;
  top: 100px;
  margin-left: 250px;
  font-size: 25px;
  color: white;
  font-weight: bold;
}

p{
  font-size: 30px;
}

img{
  width: 50px;
  height: 50px;
  display: inline;
  margin-top: 10px;
}

h1{
   font-size:50px;
   display: inline;
}
</style>
